<template>
	<com-page :bg-color="skinColor.color_bg_1">
		<com-nav-bar :bg-color="skinColor.color_bg_1" :color="skinColor.color_1">
			<template #left>
				<com-icon name="close" size="40" :color="skinColor.color_1" @click="$Router.back()"></com-icon>
			</template>
			<template #title>
				<text class="fs-28 ml-20 lines-2 y-flex-1" :style="{color: skinColor.color_1}">{{loading ? '正在跳转网址..' : (title || nowSrc) }}</text>
			</template>
			<template #right>
				<com-icon class="ml-20" name="more" size="40" :color="skinColor.color_1" @click="toolbarShow = true"></com-icon>
			</template>
		</com-nav-bar>
		<browser ref="browser" :theme="skinMode == 'night' ? 'dark' : 'light'" class="y-flex-1" :src="src"
		@loaded="handleLoaded"
		@loadstart="handleLoadstart"
		@backerror="handleBackError"></browser>
		<com-toolbar radius="5" :top="windowTop + 'px'" width="350" :visible.sync="toolbarShow" :bg-color="skinColor.color_bg_2">
			<com-toolbar-item :color="skinColor.color_1" text="浏览记录" @click="handleRecord"></com-toolbar-item>
			<com-toolbar-item :color="skinColor.color_1" text="软件设置" @click="$Router.push({path: '/pages/my/setting'})"></com-toolbar-item>
			<com-toolbar-item :color="skinColor.color_1" text="分享网页" @click="handleShare"></com-toolbar-item>
			<com-toolbar-item :color="skinColor.color_1" text="复制网页" @click="handleCopy"></com-toolbar-item>
			<com-toolbar-item :color="skinColor.color_1" text="浏览器打开" @click="handleOther"></com-toolbar-item>
		</com-toolbar>
	</com-page>
</template>

<script>
	import Browser from './browser.vue'
	import appMixin from '@/common/mixin/app.js'
	import { openDB, closeDB, insert } from '@/assets/database'
	export default {
		mixins: [appMixin],
		components: {
			Browser
		},
		data () {
			return {
				nowSrc: '',//当前访问站点链接
				title: '',//当前访问站点标题
				src: '',//初始访问站点链接
				loading: true,//加载中
				toolbarShow: false//显示工具栏
			}
		},
		onLoad() {
			this.src = this.$Route.query.src
		},
		onPullDownRefresh() {
			this.src = ''
			this.$nextTick(function () {
				this.src = this.nowSrc
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			handleLoaded (e) {
				if ( !this.$store.getters['setting/GET_NOTRACE'] ) {
					openDB().then(() => {
						insert('history', {title: e.title, href: e.href }).then(() => {
							closeDB()
						}).catch(err => {
							closeDB()
							uni.showToast({
								title: err.message,
								icon: 'none'
							})
						})
					})
				}
				this.title = e.title
				this.nowSrc = e.href
				this.loading = false
			},
			handleLoadstart () {
				this.loading = true
			},
			handleBackError () {
				this.$Router.back()
			},
			handleRecord () {
				this.toolbarShow = false
				this.$Router.push({
					path: '/pages/browser/history',
					complete: () => {
						uni.$once('browser_history', e => {
							this.src = e.detail.href
						})
					}
				})
			},
			handleShare () {
				plus.share.sendWithSystem({content:'网站标题：' + this.title + ' 网站链接：' + this.nowSrc,href:this.nowSrc});
			},
			handleCopy () {
				this.$utils.copyText('网站标题：' + this.title + ' 网站链接：' + this.nowSrc)
			},
			handleOther () {
				plus.runtime.openURL(this.nowSrc)
			}
		},
		onBackPress(event) {
			if ( event.from == 'backbutton' ) {
				this.$refs.browser && this.$refs.browser.back()
				return true
			}
			return false
		}
	}
</script>

<style>
</style>